@import "../var";
@import "../mixin";

// 秒杀模块 
.seckill-wrap {
  display: inline-block;
  margin-right: 3px;
  vertical-align: text-bottom;
  color: #ff5555;

  span {
    display: inline-block;
    color: #fff;
    font-size: px(12);
    background-color: #ff5555;
    border-radius: px(2);
    height: px(16);
    width: px(20);
    line-height: 0.16rem;
    text-align: center;
    margin: 0 2px;
  }
}
.cashier-page, .otherBlanksPopUp {
  line-height: 1;
  &>.gzl-section {
    &.hidden {
      overflow: hidden;
    }
  }

  .readyPayBlock {
    background-color: #fff;
    position: relative;
    height: px(74);
    margin-bottom: .12rem;

    .payStatus {
      padding: px(12) px(16);

      .payMoney {
        font-size: px(14);
        color: #333;
        margin-bottom: px(12);

        span {
          color: #FC0D1B;

          em {
            font-size: px(20);
            font-weight: 600;
          }
        }
      }

      .payTimeLimit {
        color: #999;
        font-size: px(12);
      }

      .openPayOrderDetail {
        position: absolute;
        top: px(15);
        right: px(16);
        font-size: px(12);
        padding-right: 0.1rem;

        &::after {
          position: absolute;
          right: 0.01rem;
          top: 0;
          bottom: 0;
          margin: auto;
          content: '';
          display: inline-block;
          width: 0;
          height: 0;
          border-top: .03rem solid #999;
          border-right: .03rem solid transparent;
          border-left: .03rem solid transparent;
        }
      }
    }

    .payOrderDetail-wrap {
      // display:none;
      display: none;
      position: relative;
      z-index: 1;
      transition: all 0.3 linear;

      .msg-wrapper {
        max-height: px(363);
        background-color: #fff;
        overflow: auto;

        .payOrderDetail {
          max-height: px(304);
          overflow: auto;
          padding: px(12) px(16);
          position: relative;

          .payOrderMain {
            .img-wrap {
              width: px(120);
              height: px(80);
              margin-right: px(8);

              img {
                width: 100%;
                height: 100%;
              }
            }

            .payMsg {
              p {
                font-size: px(16);
                color: #333;
                margin-bottom: px(10);
                max-height: px(40);
                @include line-clamp(2);
                line-height: 1.2;
              }

              .schedule,
              .num {
                font-size: px(12);
                color: #999;
                margin-bottom: px(10)
              }
            }
          }

          &::after {
            content: "";
            position: absolute;
            display: block;
            width: 100%;
            height: px(1);
            background-color: #ebebeb;
            transform: scaleY(.5);
            bottom: 0;
            left: 0;
          }
        }

        .payOrderList {
          padding: px(12) px(16);

          .payMsgItem {
            margin-bottom: px(12);
            font-size: px(12);
            color: #999;

            .paytext {
              width: px(70);
            }

            .payTime {
              text-align: center;
            }

            .pay {
              color: #999;
            }
          }
        }
      }

      .opcityBg {
        background-color: #000;
        opacity: 0.2;
        width: 100%;
        height: px(500);
        transition: all .3s;
      }
    }
  }

  .discountCoupon {
    margin-bottom: 0.12rem;

    .cashier-cell {
      .gzl-cell__ft {
        color: #FC0D1B;
      }
    }

    .coupon-fail {
      .fail {
        color: #FC0D1B;
      }
    }
  }

  .payDivided {
    margin-bottom: 0.12rem;

    .pd10 {
      padding-top: 0.1rem;

      .gzl-switch {
        &:checked {
          border-color: #ffd800;
          background-color: #ffd800;
        }
      }
    }

    .payInput {
      display: none;

      &.active {
        display: flex;
      }
    }
  }

  .payWayList{
    .payWayItem {
      padding: 0.13rem .16rem;
      height: px(60);

      // 单行;
      &.single {
        padding: 0.18rem 0.16rem;

        .gzl-cell__bd {
          .payWayText-up {
            margin-bottom: 0
          }
        }
      }

      .gzl-cell__hd {
        width: px(24);
        height: px(24);
        font-size: px(24);
        margin-right: 0.12rem;
      }

      .payUnionSupport {
        width: px(28);
        height: px(28);
        overflow: hidden;
        margin-right: 0.1rem;
        font-size: px(28);
      }

      .gzl-cell__bd {
        .payWayText-up {
          height: px(20);
          line-height: px(20);
          margin-bottom: px(2);
        }

        .payWayText-down {
          font-size: px(10);
          line-height: px(14);

          .cardNum {
            color: #999;
            margin-right: px(6);
          }

          .cardTips {
            color: #FC0D1B;
          }
        }
      }

      .contact-check {
        color: #999;
        font-size: px(20);
      }
      &::after{
        left: 0.52rem;
      }
    }

    .dividedPay {
      display: none;

      .gzl-cell {
        padding: px(10) 0 px(10) px(10);

        .divided-wrap {
          width: px(112);
          height: px(80);
          margin-right: px(10);
          background: #F7F7F7;
          border-radius: 4px;
          padding: px(12) px(12);
          position: relative;
          overflow: hidden;
          // border: px(1) solid #F7F7F7;
          border-radius: 4px;

          .dividedTime {
            text-align: center;
            margin-bottom: px(2);
            font-weight: bold;
            height: px(20);
            line-height: px(20);
          }

          .eachPay {
            text-align: center;
            margin-bottom: px(2);
            font-size: px(12);
            height: px(17);
            line-height: px(17);
          }

          .averageMoney {
            text-align: center;
            font-size: px(10);
            height: px(14);
            line-height: px(14);
          }

          .dividedTips {
            display: none;
            background-color: #FFD800;
            position: absolute;
            font-size: px(10);
            top: 0.04rem;
            left: -0.18rem;
            padding: px(3) px(20);
            transform: rotate(-45deg)
          }

          .dividedSelecIcon {
            display: none;
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: px(20);
          }

          &.active {
            border-color: #FFD800;
            background-color: #FFF9D8;

            .dividedTips {
              display: block;
            }

            .dividedSelecIcon {
              display: block;
            }
          }
        }
      }
    }

    .selectOtherBlank {
      height: px(44);
      color: #999;
      position: relative;
      .gzl-cell {
        padding: 0 px(18) 0 px(52);
        height: 100%;
        &::after{
          opacity: 1;
          left: 0.52rem;
        }
      }
    }

    .otherPayWayTips {
      height: px(40);
      padding-left: px(16);
      line-height: px(40);
      color: #999;
    }

    .hide {
      display: none;
    }

    .getOtherPayWay {
      color: #999;
      text-align: center;
      height: px(44);
      line-height: px(44);
      background-color: #fff;
    }
  }
}